<template>
  <div class="index_content">
    <a-locale-provider :locale="locale">
      <a-spin
        wrapperClassName="spinClass"
        size="large"
        tip="Loading..."
        :spinning="spinning"
      >
        <div class="container" id="components-layout-demo-basic">
          <!-- <a-layout> -->
          <a-layout-header>
            <a-row class="row_style">
              <a-col :sm="{ span: 4 }" class="logo_div">
                <img class="logo_img" src="static/img/logoZX.png" alt />
              </a-col>
              <a-col :sm="{ span: 10 }">
                <div class="slide_head">
                  <span class="icon_span">
                    <img src="static/img/custom.png" alt />
                  </span>
                  <div class="logo">
                    <!-- <span v-if='userType1 == "22"'>商户服务平台</span>
                    <span v-if='userType1 == "11"'>合作机构服务平台</span>-->
                    <span style="color: #353535; font-weight: 500"
                      >&nbsp;&nbsp;{{ userName }}</span
                    >
                  </div>
                </div>
              </a-col>
              <a-col :sm="{ span: 10 }" class="col_style">
                <div>
                  <span class="span_btn">最近登陆</span>
                  <span v-if="loginTime != ''" class="span_ctime">{{
                    loginTime
                  }}</span>
                  <span v-else class="span_ctime"
                    >&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;</span
                  >
                </div>
                <div id="components-badge-demo-dot" @click="goHelpPDF">
                  <div style="height: 10px"></div>
                  <a-icon
                    style="font-size: 30px; cursor: pointer"
                    type="question-circle"
                  />
                </div>
                <div id="components-badge-demo-dot" @click="goMessList">
                  <a-badge :count="count" :offset="[-17, 15]">
                    <img class="notice_img" src="static/img/notice.png" alt />
                  </a-badge>
                </div>
                <a-popconfirm
                  placement="bottomLeft"
                  title="确定退出登录?"
                  @confirm="confirm"
                  @cancel="cancel"
                  okText="确定"
                  cancelText="取消"
                >
                  <div class="logout">
                    <img class="quit_img" src="static/img/quit.png" alt />
                  </div>
                </a-popconfirm>
              </a-col>
            </a-row>
          </a-layout-header>

          <a-layout>
            <a-layout-sider
              :style="{
                width: '14%',
                height: '91vh',
                flex: '0 0 14%',
                maxWidth: '14%',
                minWidth: '220px',
                boxShadow: '1px 10px 6px 1px #ccc',
              }"
            >
              <side-bar></side-bar>
            </a-layout-sider>
            <a-layout-content>
              <div class="content_div">
                <div class="content_main">
                  <!-- <div v-if="!isReload"> -->
                  <keep-alive>
                    <router-view
                      v-if="$route.meta.keepAlive"
                      @changelogintime="LoginTime"
                    ></router-view>
                  </keep-alive>
                  <router-view v-if="!$route.meta.keepAlive"></router-view>
                  <!-- </div>
                                <div v-else>
                                    <router-view v-if="isReload"></router-view>
                  </div>-->
                </div>
                <!-- <a-affix v-if='rightShow'
                                :style="{ position: 'absolute', top: '85vh', left: '85vw',zIndex:'6'}">
                                <div class="fix_div">
                                    <img @click='rightNear' class="icon_sty" src="static/img/narrow.png" alt>
                                    <div @click='techService' class="consult_div">
                                        <img src="static/img/consultation_2.png" alt>
                                        <a-badge :count="technologyCount">
                                            <a-button class="fix_button" type="primary">技术咨询</a-button>
                                        </a-badge>
                                    </div>
                                    <div @click='cusService' class="consult_div">
                                        <img src="static/img/consultation_1.png" alt>
                                        <a-badge :count="serviceCount">
                                            <a-button class="fix_button" type="primary" ghost>客服咨询</a-button>
                                        </a-badge>
                                    </div>
                                </div>
                </a-affix>-->
                <!-- <a-affix v-if='!rightShow'
                                :style="{ position: 'absolute', top: '85vh', left: '97.5vw',zIndex:'6'}">
                                <a-badge :count="allcount" dot>
                                    <div @click='rightNearAway' class="seek_div">
                                        咨<br>
                                        询
                                    </div>
                                </a-badge>
                </a-affix>-->
              </div>
            </a-layout-content>
          </a-layout>
        </div>
      </a-spin>
    </a-locale-provider>
    <a-modal
      @ok="handleOk"
      @cancel="handleCancel"
      :visible="modalVisible"
      :closable="false"
      :maskClosable="false"
      :footer="null"
    >
      <div class="modal_div">
        <div class="modal_title">
          <h3>{{ notice.head }}</h3>
          <p>{{ notice.releaseTime }}</p>
        </div>
        <p
          v-html="notice.content"
          style="line-height: 25px; letter-spacing: 1px"
        ></p>
        <div class="footClass">
          <a-button
            v-if="buttonShow"
            type="primary"
            class="buttonClass"
            :disabled="buttonShow"
            >{{ buttonText }}s</a-button
          >
          <a-button
            v-if="!buttonShow"
            type="primary"
            class="buttonClass"
            @click="clickhandleCancel"
            >关闭</a-button
          >
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
import zhCN from "ant-design-vue/es/locale-provider/zh_CN";
import moment from "moment";
import "moment/locale/zh-cn";
moment.locale("zh-cn");
import SideBar from "@/components/menu/sidebar";
import api from "@/common/api";
export default {
  name: "userindex",
  components: {
    SideBar,
  },
  provide() {
    return {
      reload: this.reload,
    };
  },
  data() {
    return {
      zhCN,
      locale: zhCN,
      moment,
      userName: "",
      userType1: "11",
      ModalText: "",
      modalVisible: false,
      isReload: Boolean,
      buttonText: 3,
      buttonShow: true,
      rightShow: true,
      count: 0,
      spinning: false,
      allcount: 0,
      serviceCount: 0,
      technologyCount: 0,
      loginTime: "",
      showName: "",
      notice: {
        content: "",
        head: "",
        releaseTime: "",
      },
    };
  },
  watch: {
    $route(to, from) {
      if (to.path == "/userMain") {
      } else {
      }
    },
  },
  computed: {
    memberType: {
      get() {
        // state => state.memberType
        return this.$store.state.memberType;
      },
      set() {},
    },
    userType: {
      get: function () {
        let usertype = "";
        if (this.memberType == "CU") {
          usertype = "per";
        } else {
          usertype = "org";
        }
        return usertype;
      },
      set() {},
    },
  },
  created() {
    let AgentType = localStorage.getItem("AgentType");
    if (AgentType == "AGENT_MANAGER") {
      isReload = true;
    }
    // this.spinning = false;
  },
  mounted() {
    if (sessionStorage.getItem("loginTime")) {
      this.loginTime = sessionStorage.getItem("loginTime");
      // console.log(this.loginTime)
    } else {
      this.loginTime = "";
    }

    if (sessionStorage.getItem("username")) {
      this.userName = sessionStorage.getItem("username");
      // console.log(this.loginTime)
    } else {
      this.userName = "";
    }

    if (sessionStorage.getItem("count")) {
      this.count = sessionStorage.getItem("count");
      console.log("this.count,this.count", this.count);
    } else {
      this.count = 0;
    }

    let localMemberType = localStorage.getItem("memberType");
    if (localMemberType) {
      this.$store.dispatch("changeType", localMemberType);
    } else {
    }

    if (this.memberType == "CU") {
      this.userType = "per";
    } else {
      this.userType = "org";
    }
    // this.judeSubmitReceipt();

    // 登录注释
    this.getRealTime();
    // this.getallcount();
    this.bulletinGet();
  },
  activated() {
    let self = this;
    let timer = setInterval(() => {
      if (self.buttonText > 1) {
        self.buttonText--;
      } else {
        clearInterval(timer);
        self.buttonShow = false;
      }
    }, 1000);
  },

  methods: {
    reload() {
      this.isReload = false;
      this.$nextTick(function () {
        this.isReload = true;
      });
    },
    judeSubmitReceipt() {
      // this.spinning = true;
      if (this.memberType != "CU") {
        let data = {};
        api.judeSubmitReceipt(
          data,
          (res) => {
            if (res.code == "OK") {
              sessionStorage.setItem("isverify", true);
            } else {
              sessionStorage.setItem("isverify", false);
            }
            // this.spinning = false;
          },
          (err) => {
            console.log("err", err);
          }
        );
      }
    },
    getallcount() {
      this.$axios.post("/agent/chatRoom/replyCount", {}).then((res) => {
        // console.log('咨询数', res)
        if (res.data.code == "OK") {
          this.allcount = res.data.data.count;
          this.serviceCount = res.data.data.serviceCount;
          this.technologyCount = res.data.data.technologyCount;
        }
      });
    },
    bulletinGet() {
      this.$axios.get("/agent/messageInform/bulletin/board").then(
        (res) => {
        
          if (res.data.code == "OK") {
            if (res.data.data.status !== 1) {
              this.notice = res.data.data;
              this.modalVisible = true;
              let self = this;
              let timer = setInterval(() => {
                if (self.buttonText > 1) {
                  self.buttonText--;
                } else {
                  clearInterval(timer);
                  self.buttonShow = false;
                }
              }, 1000);
            }
          }
        },
        (err) => {}
      );
    },
    LoginTime(value, isSpinning, userName, count) {

    
      this.loginTime = value;
      sessionStorage.setItem("loginTime", value);
      // this.spinning = !isSpinning;
      this.userName = userName;
      this.count = count;
    },
    handleOk(e) {
      setTimeout(() => {
        this.modalVisible = false;
      }, 2000);
    },
    handleCancel(e) {
      this.modalVisible = false;
    },
    clickhandleCancel() {
      let data = {
        upId: [this.notice.id],
      };
      api.changeMessStatus(
        data,
        (res) => {
          if (res.code == "OK") {
            this.modalVisible = false;
          } else {
          }
        },
        (err) => {}
      );
    },
    confirm(e) {
      this.loginOut();
    },
    cancel(e) {},
    loginOut() {
      this.$axios.get("/agent/member/logout").then(
        (res) => {
      
          if (res.data.code == "OK") {
            localStorage.removeItem("token");
            sessionStorage.removeItem("isverify");
            localStorage.clear();
            sessionStorage.clear();
            this.$message.success("登出成功！");
            this.$router.push("/home");
            //清除SSE请求
            if (window.evtSource) {
              window.evtSource.close();
            }
          }
        },
        (err) => {}
      );
    },
    handleChange(value) {
      // console.log(value);
    },
    gologin() {
      this.$router.push("/home/loginall");
    },
    goMessList() {
      this.$router.push("/messageList");
    },
    goHelpPDF() {
      window.open("/agent/static/Help/help_pdf.html");
    },
    onSearch(value) {
      // console.log(value)
    },
    rightNear() {
      this.rightShow = false;
    },
    rightNearAway() {
      this.rightShow = true;
    },
    listenMessage() {
      var lockReconnect = false; //避免重复连接
      var ws;
      var tt;
      var self = this;
      // var wxHost = this.$store.state.wxHost;
      // console.log(wxHost);
      var memberNo = sessionStorage.getItem("memberNo");

      if (window.location.protocol == "http:") {
        var wxUrl =
          "ws://" +
          window.location.hostname +
          "/customer/ws/message/center/" +
          memberNo;
      } else {
        var wxUrl =
          "wss://" +
          window.location.hostname +
          "/customer/ws/message/center/" +
          memberNo;
      }
      // var wxUrl =
      //   "ws://" + "192.168.16.203" + "/customer/ws/message/center/" + memberNo;
      // console.log(wxUrl);

      if (typeof WebSocket == "undefined") {
        console.log("您的浏览器不支持WebSocket");
      } else {
        console.log("您的浏览器支持WebSocket");
        function createWebSocket() {
          try {
            ws = new WebSocket(wxUrl);
            init();
          } catch (e) {
            console.log("catch");
            reconnect(wxUrl);
          }
        }
        function init() {
          ws.onclose = function () {
            // console.log("WebSocket关闭");
            reconnect(wxUrl);
          };
          ws.onerror = function () {
            // console.log("WebSocket发生异常了");
            reconnect(wxUrl);
          };
          ws.onopen = function () {
            console.log("WebSocket 已打开");
            //心跳检测重置
            heartCheck.start();
          };
          ws.onmessage = function (event) {
            //拿到任何消息都说明当前连接是正常的
            // console.log(event, event.data, typeof event.data);
            if (event.data !== "pong") {
             
              self.changeMsgCount(event.data);
            }
            heartCheck.start();
          };
        }
        function reconnect(url) {
          if (lockReconnect) {
            return;
          }
          lockReconnect = true;
          //没连接上会一直重连，设置延迟避免请求过多
          tt && clearTimeout(tt);
          tt = setTimeout(function () {
            createWebSocket(url);
            lockReconnect = false;
          }, 4000);
        }
        //心跳检测
        var heartCheck = {
          timeout: 3000,
          timeoutObj: null,
          serverTimeoutObj: null,
          start: function () {
        
            var self = this;
            this.timeoutObj && clearTimeout(this.timeoutObj);
            this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);
            this.timeoutObj = setTimeout(function () {
              //这里发送一个心跳，后端收到后，返回一个心跳消息，
              // console.log("55555");
              ws.send("ping");
              self.serverTimeoutObj = setTimeout(function () {
                console.log(ws);
                ws.close();
                // createWebSocket();
              }, self.timeout);
            }, this.timeout);
          },
        };
        createWebSocket(wxUrl);
      }
    },
    // sse 获取实时消息
    getRealTime() {
      var self = this;
      var memberNo = sessionStorage.getItem("memberNo");
    
      if (!!window.EventSource) {
        window.evtSource = new EventSource(
          "/agent/messageInform/unreadCount/" +
            memberNo
        );

        window.evtSource.addEventListener(
          "open",
          function (t) {
            // console.log("开启");
          },
          false
        );

        window.evtSource.addEventListener("message", function (t) {
          // console.log(t);
          var data = JSON.parse(t.data).unreadCount;
          // console.log(data);
          self.changeMsgCount(data);
        });

        window.evtSource.addEventListener(
          "error",
          function (t) {
            if (t.readyState == EventSource.CLOSED) {
              console.log("关闭");
            }
          },
          false
        );
      } else {
        console.error("浏览器不支持");
      }
    },
    //客服咨询
    cusService() {
   
      this.$router.push({
        name: "客服咨询",
      });
    },
    //技术咨询
    techService() {
     
      this.$router.push({
        name: "技术咨询",
      });
    },
    changeMsgCount(value) {
   
      this.count = value;
      sessionStorage.setItem("count", this.count);
    },
  },
};
</script>

<style lang="less" scoped>
.slide_head {
  display: flex;
  align-items: center;
  justify-content: start;
  margin-left: 40px;
}

.slide_head img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo span {
  color: #52506b;
  font-size: 16px;
}

#components-layout-demo-basic {
  background: #fff;
}

.row_style {
  flex: 1;
  background: #fafbff;
}

.col_style {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  /* height: 10vh; */
}

#components-layout-demo-basic .ant-layout-header {
  border-bottom: 1px solid #f0f0ef;
  height: 9vh;
  padding: 0;
  line-height: 9vh;
  background: #fff;
  display: flex;
  align-items: center;
  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
}

#components-layout-demo-basic .ant-layout-header img {
  margin: 1vw;
}

#components-layout-demo-basic .ant-layout-content {
  height: 91vh;
  background: #e4e8ed;
}

#components-layout-demo-basic .ant-layout-footer {
  line-height: 1.5;
}

#components-layout-demo-basic > .ant-layout {
  margin-bottom: 48px;
}

#components-layout-demo-basic > .ant-layout:last-child {
  margin: 0;
}

span {
  cursor: pointer;
}

.header_input_search {
  width: 250px;
  border: 0;
  outline: none;
  background-color: rgba(0, 0, 0, 0);
  height: 50px;
  padding: 10px 5px;
}

.icon_search {
  cursor: pointer;
}

.header_input {
  width: 280px;
  height: 50px;
  padding: 10px 20px;
  border-radius: 25px;
  background: #f0f0ef;
  border: 1px solid #f0f0ef;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 40px;
}

.header_input .anticon {
  font-size: 20px;
  color: #29a576;
}

.content_div {
  min-height: 91vh;
  padding: 30px 40px 30px 40px;
  background: #e4e8ed;
}

.content_main {
  width: 100%;
  background: #fff;
  border-radius: 5px;
  height: 100%;
  /* overflow: scroll;
        overflow-x: hidden;
        overflow-y: auto; */
}

// .content_main:hover {
//     /* -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
//     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
//     border-color: rgba(0, 0, 0, 0.09); */
// }

#components-badge-demo-dot {
  margin-right: 40px;
}

#components-badge-demo-dot .ant-badge-count {
  height: 18px;
  line-height: 18px;
  padding: 0 6px;
}

.ant-badge-multiple-words {
  padding: 0 6px;
}

#components-badge-demo-dot .anticon-notification,
#components-badge-demo-dot .anticon-sound {
  width: 24px;
  height: 24px;
  line-height: 24px;
  font-size: 24px;
}

.footClass {
  text-align: center;
}

.buttonClass {
  width: 100px;
}

.modal_div {
  padding: 30px;
}

.modal_title {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-bottom: 1px solid #ccc;
  margin-bottom: 25px;
}

.modal_title p {
  margin-bottom: 5px;
}

.modal_greet {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}

.modal_greet span {
  margin-bottom: 8px;
}

.modal_conclusion {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
}

.modal_conclusion span {
  margin-bottom: 8px;
}

.span_btn {
  border-radius: 3px;
  padding: 5px 10px;
  color: #9b9ba1;
  background: #efefef;
  margin-right: 20px;
}

.span_ctime {
  font-size: 16px;
  color: #52506b;
  margin-right: 40px;
}

.fix_div {
  width: 12vw;
  height: 10vh;
  padding: 10px 15px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.4);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
  box-sizing: content-box;
}

.seek_div {
  width: 2vw;
  height: 10vh;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.9);
  color: #1890ff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.consult_div {
  display: flex;
  align-items: center;
  flex-direction: column;
  cursor: pointer;
}

.consult_div img {
  width: 30px;
  height: 45px;
}

.fix_button {
  font-size: 12px;
  padding: 0 8px;
  height: 25px;
  margin: 0 5px;
}

.icon_sty {
  position: absolute;
  right: 5px;
  top: 5px;
  cursor: pointer;
  width: 1vw;
}

#components-layout-demo-basic .logo_img {
  width: 8vw;
}

#components-layout-demo-basic .icon_span img {
  width: 40px;
  height: 40px;
  border-radius: 0;
  margin-top: 1.5vh;
}

#components-layout-demo-basic #components-badge-demo-dot .notice_img {
  width: 35px;
  height: 35px;
}
#components-layout-demo-basic .logout {
  margin-right: 20px;
  cursor: pointer;
}

#components-layout-demo-basic .logout .quit_img {
  width: 40px;
  height: 40px;
}

.logo_div {
  border-right: 1px solid #ebebeb;
  width: 14vw;
  min-width: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 10vh;
}

.spinClass {
  height: 100%;
}

/deep/.ant-spin-spinning {
  max-height: 100vh !important;
}

/* .fade-enter-active,
    .fade-leave-active {
        transition: opacity 0.1s
    }

    .fade-enter,
    .fade-leave-to {
        opacity: 0.5
    } */

/*滚动条样式*/
.content_main::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 4px;
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 4px;
}

.content_main::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 5px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.2);
}

.content_main::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
}
</style>